<template>
  <div>
    <nav-header :headerTitle="'累计收益'" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <van-list
        class="articlelist"
        v-model="params.loading"
        :finished="params.finished"
        finished-text="没有更多了"
        @load="gainArticleListByPages"
        :error.sync="params.error"
        error-text="请求失败，点击重新加载"
      >
        <div class="p-items" v-for="(items,index) in list" :key="index">
          <div class="p-content">
            <span class="pi-type" v-show="items.busScene == 1">朋友圈任务</span>
            <span class="pi-type" v-show="items.busScene == 2">微信群任务</span>
            <span class="pi-time">{{items.createTime | formatDate}}</span>
            <span class="pi-money">+{{items.amount /100}}</span>
          </div>
        </div>
      </van-list>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { List } from "vant";
Vue.use(List);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "income",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {},
      params: {
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        pageSize: 15,
        pageNum: 1,
        error: false,
        loading: false,
        finished: false
      },
      list: []
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  filters: {
    formatDate: function(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return "";
      } else {
        let date = new Date(value);
        let y = date.getFullYear(); // 年
        let MM = date.getMonth() + 1; // 月
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate(); // 日
        d = d < 10 ? "0" + d : d;
        let h = date.getHours(); // 时
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes(); // 分
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds(); // 秒
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      }
    }
  },
  methods: {
    init: function() {},
    //list加载分页
    gainArticleListByPages() {
      this.$http.post("flowForward/getAccumulatedIncomePage", this.params).then(
        res => {
          let resData = res.data;
          this.list = this.list.concat(resData.items);
          ++this.params.pageNum;
          // 加载状态结束
          this.params.loading = false;
          // 数据全部加载完成
          if (resData.pages < this.params.pageNum) {
            this.params.finished = true;
          }
        },
        err => {
          this.params.error = true;
          console.log(err);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  .p-items {
    padding-left: 32px;
    padding-right: 32px;
    .p-content {
      width: 100%;
      height: 164px;
      border-bottom: 2px solid rgba(237, 237, 237, 1);
      position: relative;
    }
    .pi-type {
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      position: absolute;
      left: 0px;
      top: 33px;
    }
    .pi-time {
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      position: absolute;
      left: 0px;
      top: 90px;
    }
    .pi-money {
      font-size: 42px;
      font-family: PingFangSC-Medium;
      font-weight: bold;
      color: rgba(255, 37, 37, 1);
      position: absolute;
      right: 0px;
      top: 55px;
    }
  }
}
</style>
